<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
<!--                    <el-form-item label="应用" prop="appid">-->
<!--                        <select-apps v-model="form.appid"></select-apps>-->
<!--                    </el-form-item>-->
                    <el-form-item label="渠道" prop="source">
                        <select-app-source v-model="form.source" :form="true" :clearable="false"></select-app-source>
                    </el-form-item>
                    <el-form-item label="系统" prop="os">
                        <select-os v-model="form.os"></select-os>
                    </el-form-item>
                    <el-form-item label="当前版本" prop="version">
                        <el-input v-model="form.version" placeholder="当前版本, x.x.x格式"/>
                    </el-form-item>
                    <el-form-item label="最小版本" prop="min_version">
                        <el-input v-model="form.min_version" placeholder="最小升级版本, x.x.x格式"/>
                    </el-form-item>
                    <el-form-item label="资源地址" prop="url">
                        <el-input v-model="form.url" placeholder="资源地址"></el-input>
                    </el-form-item>
                    <el-form-item label="备份资源地址" prop="bak_url">
                        <el-input v-model="form.bak_url" placeholder="备份资源地址"></el-input>
                    </el-form-item>
                    <el-form-item label="测试资源">
                        <el-radio-group v-model="form.is_debug">
                            <el-radio-button :label="0">否</el-radio-button>
                            <el-radio-button :label="1">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status">
                            <el-radio-button :label="item.value" v-for="(item, index) in options.status" :key="index">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                        <el-button @click="cancel">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        props: {
            data: {

            }
        },
        data() {
            return {
                loading: false,
                form: {},
                formDefault: {
                    source: 0,
                    version: '',
                    min_version: '',
                    is_debug: 0,
                    status: 0,
                },
                rules: {
                    appid: [
                        { required: true, message: '请选择所属应用', trigger: 'blur' },
                    ],
                    //source: [
                    //    { required: true, message: '请选择所属渠道', trigger: 'blur' },
                    //],
                    os: [
                        { required: true, message: '请选择系统类型', trigger: 'blur' },
                    ],
                    version: [
                        { required: true, message: '请输入版本号', trigger: 'blur' },
                    ],
                    min_version: [
                        { required: true, message: '请输入最低版本号', trigger: 'blur' },
                    ],
                    is_debug: [
                        { required: true, message: '请选择是否调试', trigger: 'blur' },
                    ],
                    url: [
                        { required: true, message: '请输入资源URL', trigger: 'blur' },
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'blur' },
                    ],
                },
                options: this.$store.state.appResource.options,
            }
        },
        computed: {

        },
        watch: {
            data (newVal) {
                this.syncForm();
            }
        },
        methods: {
            getFormAction() {
                return this.form.id ? 'appResource/Update' : 'appResource/Store';
            },
            submit() {
                this.$refs.form.validate(valid => {
                    if (!valid) return false;
                    this.loading = true;
                    this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                        this.$message.success(res.data.message);
                        this.$emit('submit');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            cancel() {
                this.$emit('cancel');
            },
            syncForm() {
                this.form = Object.assign({}, this.data.id ? this.data : this.formDefault);
            }
        },
        created () {
            this.syncForm();
        }
    }
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

